<template>
    <div v-loadmore="loadmore">
        <headNav title=""></headNav>
        <div class="tab-p">
            <div class="tab-item" @click="titleClick(val)" :class="titleType == val.id ? 'active' : ''" v-for="(val, index) in titleList" :key="index" >
                {{val.columnName}}
                <div class="tab-line"></div>
            </div>
        </div>
        <div class="search-p">
            <img class="search-icon" src="@/assets/img/cms/icon-1.png" alt="">
            <input class="search-input" type="text" placeholder="输入关键字搜索" v-model="inputVal" >
            <div class="search-btn" @click="searchClick" >搜索</div>
        </div>

        <div class="cms-list" v-loadmore="loadmore">
            <div class="cms-item" v-for="(val, index) in columnList" :key="index" @click="articleClick(val)" >
                <img :src="val.coverImgUrl" class="cms-img" alt="" v-if="val.coverImgUrl" >
                <img src="@/assets/img/cms/icon-4.png" class="cms-img" alt="" v-else >
                <div class="cms-info" v-if="!val.videoUrl" >
                    <div class="cms-title">{{val.title}}</div>
                    <div v-if="val.shortContent" class="simpleCss" >{{val.shortContent}}</div>
                    <div v-else class="simpleCss" >暂无简介</div>
                    <div class="cms-date-1">{{val.creationTime}}</div>
                </div>
                <div class="cms-info" v-if="val.videoUrl" >
                    <div class="cms-title">{{val.title}}</div>
                    <div v-if="val.shortContent" class="simpleCss" >{{val.shortContent}}</div>
                    <div v-else class="simpleCss" >暂无简介</div>
                    <div class="cms-date">{{val.creationTime}}</div>
                    <!-- <div class="cms-time">时长：1小时35分钟18秒</div> -->
                </div>
                <img class="play-btn" src="@/assets/img/cms/icon-2.png" alt="" v-if="val.videoUrl" >
            </div>
            <!-- <div class="more">加载中...</div> -->
            <div class="more" v-if="isMore" >没有更多了</div>
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import {getColumnApi, getColumnListApi} from '@/api/cmsApi'
export default {
    components: {
      headNav,
    },
    data(){
      return {
        isMore: true,
        inputVal: '',   // 搜索输入框存值
        titleType: '',  // 标题类型切换
        titleList: [],   // 类型id存储
        columnList: [],  // 获取到的栏目列表
        PageNum: 1,    // 获取第几页
      }
    },
    methods: {
      // 滚动到底部触发事件
      async loadmore(){
        this.PageNum = this.PageNum + 1
        await this.packColumnList(this.titleType)
      },
      //  点击标题触发事件
      async titleClick (e) {
       localStorage.titleType = e.id
       this.titleType = e.id
       this.inputVal = ''
       this.PageNum = 1
       await this.packColumnList(e.id)
      },
      // 点击搜索触发事件
      async searchClick () {
        this.PageNum = 1
        await this.packColumnList(this.titleType)
      },
      // 点击文章  触发跳转
      articleClick (e) {
         localStorage.article = JSON.stringify(e)
         localStorage.articleMode = 1  // 1 = 点击列表进入   2 = 从分享进入
         // let res = JSON.parse(localStorage.article)
         this.$router.push('detail')
      },
      // 请求栏目列表封装
      async packColumnList(e) {
        let params = {
          id: e,
          data: {
            Keyword: this.inputVal,
            ProjectId: 3,
            PageNum: this.PageNum,
            PageSize: 5
          }
        }
        // if (e == 2) params.id = this.titleList[1].id
        let res = await getColumnListApi(params)
        this.PageNum == 1 ? this.columnList = res.items : this.columnList = this.columnList.concat(res.items)
        res.items.length == 0 ? this.isMore = true : this.isMore = false
      }
    },
    async mounted() {
      let res = await getColumnApi()
      this.titleList = res.data
      console.log(res)
      // this.titleType = '39fe182a-3724-b81b-6820-a1fd998fd647'
      let type = ''
      for (let i of res.data) {
        if (i.id == localStorage.titleType) {
          type = i.id
          break;
        } else {
          type = this.titleList[0].id
        }
      }
      localStorage.titleType = type
      this.titleType = type
      await this.packColumnList(this.titleType)

    }
}
</script>
<style scoped>
.tab-p{
    height: 0.92rem; display: flex; justify-content: space-around;
    line-height: 0.92rem; background: #fff;
}
.tab-item{
    font-size: 0.32rem;  color: #666666;
    position: relative;
    max-width: 1.8rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.tab-item.active{
    color: #128FEF;
}
.tab-line{
    width: 100%; height: 0.06rem; background: #128FEF; border-radius: 0.03rem;
    position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    display: none;
}
.tab-item.active .tab-line{
    display: block;
}
.search-p{
    position: relative; margin: 0.2rem;
}
.search-icon{
    position: absolute; left: 0.18rem; top: 0.14rem;
    width: 0.32rem; height: 0.32rem;
}
.search-input{
    width: 6.1rem; height: 0.6rem; background: #fff;
    box-sizing: border-box; border-radius: 0.3rem;
    display: inline-block; vertical-align: middle;
    padding: 0 0 0 0.6rem; font-size: 0.24rem;
}
.search-btn{
    display: inline-block; vertical-align: middle;
    color: #333333; font-size: 0.28rem;
}
.cms-list{

}
.cms-item{
    position: relative;
    width: 6.8rem; height: 2.14rem; background: #fff; border-radius: 0.15rem;
    margin: 0.2rem; padding: 0 0.2rem; box-sizing: border-box;
    /* display: flex; justify-content: space-around; justify-items: center; */
}
.cms-item::before{
    content: ''; display: inline-block; vertical-align: middle; height: 100%;
}

.cms-img{
    width: 2rem; height: 1.54rem; object-fit: cover;
    display: inline-block;vertical-align: middle;
}
.cms-info{
    display: inline-block;vertical-align: middle;
    width: 4.1rem; height: 1.54rem;
}
.cms-title{
    font-size: 0.3rem; color:#333333;
    overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.cms-date{
    color: #999999;
}

.cms-date-1 {
  margin-top: 0.05rem;
  color: #999999;
}

.cms-time{
    color: #999999;
}
.play-btn{
    position: absolute;  right: 0.2rem; bottom: 0.2rem;
    height: 0.48rem; width: 0.48rem;
}
.more{
    text-align: center;color: #999999; margin-bottom: 0.2rem;
}
.simpleCss {
  width: 4rem; height: 0.63rem;
  margin-top: 5px; color: #999;
  font-size: 0.24rem; overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
  -webkit-box-orient: vertical; /* 垂直排列 */
  word-break: break-all;  /* 内容自动换行 */
}
</style>
